<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户仪表板 - InfluWatchDog</title>
    <meta name="description" content="InfluWatchDog用户仪表板">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <!-- 插件状态同步工具 -->
    <script src="{{ asset('js/extension-sync.js') }}"></script>
    <script>
        // 发送消息
        if (typeof chrome !== 'undefined' && chrome.runtime?.sendMessage) {
            chrome.runtime.sendMessage({
                action: 'auth-login'
            }, function (response) {
                console.log(response);
            });
        }
    </script>
</head>
<body class="min-h-screen bg-base-100">
    <!-- 导航栏 -->
    <div class="navbar bg-base-100 shadow-lg">
        <div class="navbar-start">
            <a href="{{ url('/') }}" class="btn btn-ghost text-xl font-bold">
                <img src="{{ asset('image/logo.png') }}" alt="InfluWatchDog" class="h-8 w-auto">
                <span class="ml-2">InfluWatchDog</span>
            </a>
        </div>
        <div class="navbar-center hidden lg:flex">
            <ul class="menu menu-horizontal px-1">
                <!-- <li><a href="#" class="hover:text-primary">查询记录</a></li>
                <li><a href="#" class="hover:text-primary">我的报告</a></li> -->
                <li><a href="#" class="hover:text-primary">账户管理</a></li>
            </ul>
        </div>
        <div class="navbar-end">
            <div class="dropdown dropdown-end">
                <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
                    <div class="w-10 rounded-full">
                        <div class="w-full h-full bg-primary/20 rounded-full flex items-center justify-center">
                            <span class="text-primary font-bold">{{ substr(Auth::user()->name, 0, 1) }}</span>
                        </div>
                    </div>
                </div>
                <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
                    <!-- <li><a href="{{ route('profile') }}">个人资料</a></li>
                    <li><a href="#">设置</a></li> -->
                    <li>
                        <form method="POST" action="{{ route('logout') }}" data-logout-form>
                            @csrf
                            <button type="submit" class="w-full text-left">退出登录</button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 主体内容 -->
    <div class="container mx-auto px-4 py-8">
        <!-- 欢迎信息 -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold mb-2">欢迎回来，{{ Auth::user()->name }}！</h1>
            <p class="text-base-content/80">开始您的网红信用查询之旅</p>
        </div>

        <!-- 功能卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            <!-- 快速查询 -->
            <div class="card bg-base-200 shadow-xl">
                <div class="card-body">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                        </div>
                        <h2 class="card-title">快速查询</h2>
                    </div>
                    <p class="text-base-content/80 mb-4">输入网红昵称或平台ID，快速获取信用信息</p>
                    <div class="card-actions">
                        <button class="btn btn-primary btn-block">开始查询（请先使用插件端）</button>
                    </div>
                </div>
            </div>

            <!-- 查询历史 -->
            <!-- <div class="card bg-base-200 shadow-xl">
                <div class="card-body">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <h2 class="card-title">查询历史</h2>
                    </div>
                    <p class="text-base-content/80 mb-4">查看您之前的所有查询记录</p>
                    <div class="card-actions">
                        <button class="btn btn-secondary btn-block">查看历史</button>
                    </div>
                </div>
            </div> -->

            <!-- 提交报告 -->
            <div class="card bg-base-200 shadow-xl">
                <div class="card-body">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-4">
                            <svg class="w-6 h-6 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                        </div>
                        <h2 class="card-title">提交报告</h2>
                    </div>
                    <p class="text-base-content/80 mb-4">提交网红不良行为记录，帮助社区</p>
                    <div class="card-actions">
                        <button class="btn btn-accent btn-block">提交报告（请先使用插件端）</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 统计信息 -->
        <!-- <div class="stats stats-vertical lg:stats-horizontal shadow bg-base-200 mb-8">
            <div class="stat">
                <div class="stat-title">本月查询次数</div>
                <div class="stat-value text-primary">12</div>
                <div class="stat-desc">↗︎ 比上月增加 20%</div>
            </div>
            <div class="stat">
                <div class="stat-title">提交报告数</div>
                <div class="stat-value text-secondary">3</div>
                <div class="stat-desc">↗︎ 已通过审核</div>
            </div>
            <div class="stat">
                <div class="stat-title">账户等级</div>
                <div class="stat-value text-accent">普通</div>
                <div class="stat-desc">升级到高级会员</div>
            </div>
        </div> -->

        <!-- 最近查询 -->
        <!-- <div class="card bg-base-200 shadow-xl">
            <div class="card-body">
                <h2 class="card-title mb-4">最近查询记录</h2>
                <div class="overflow-x-auto">
                    <table class="table table-zebra">
                        <thead>
                            <tr>
                                <th>网红名称</th>
                                <th>平台</th>
                                <th>查询时间</th>
                                <th>风险等级</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>示例网红A</td>
                                <td>YouTube</td>
                                <td>2024-12-21 10:30</td>
                                <td><span class="badge badge-success">低风险</span></td>
                                <td><button class="btn btn-sm btn-outline">查看详情</button></td>
                            </tr>
                            <tr>
                                <td>示例网红B</td>
                                <td>YouTube</td>
                                <td>2024-12-20 15:22</td>
                                <td><span class="badge badge-warning">中风险</span></td>
                                <td><button class="btn btn-sm btn-outline">查看详情</button></td>
                            </tr>
                            <tr>
                                <td>示例网红C</td>
                                <td>YouTube</td>
                                <td>2024-12-19 09:15</td>
                                <td><span class="badge badge-error">高风险</span></td>
                                <td><button class="btn btn-sm btn-outline">查看详情</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div> -->
    </div>
    <script>
        // 监听退出登录表单的提交事件，清理本地存储中的认证信息并通知插件。
        (function () {
            const logoutForm = document.querySelector('[data-logout-form]');
            if (logoutForm) {
                logoutForm.addEventListener('submit', function () {
                    if (window.TokenManager && typeof TokenManager.clearToken === 'function') {
                        TokenManager.clearToken();
                    }
                });
            }
        })();
    </script>
</body>
</html> 